
import 'package:flutter/material.dart';
import 'package:flutterappyidongjingfen/Views/TabPageViews.dart';
import 'package:flutterappyidongjingfen/LineChart/chart_utils.dart';
///业绩看板
///

class  AchievementPage extends StatefulWidget{
  @override
  AchievementPageState createState() => AchievementPageState();
}


class AchievementPageState extends State<AchievementPage>{

  //报表分析 0——构成  1——趋势
  var _chartAnalyseWay = 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Color.fromRGBO(11, 13, 28, 1),
      body: Page(),
    );
  }

  Widget Page(){
    return Column(
      children: <Widget>[
        NavgationBar("业绩看板", context),
        listView(),
      ],
    );
  }

  ///
  Widget listView(){
    return Container(
      height: MediaQuery.of(context).size.height - 100,
      margin: EdgeInsets.only(left: 10,right: 10),
      child: ListView(
        padding: EdgeInsets.only(top: 15),
        children: <Widget>[
          AreaSection(),
          dateSelect(),
          cardKPI(),
          Section("分行画像"),
          cardBankPortrait(),
          Section("营业收入概况"),
          cardIncome(),
          Section("非息收入详情"),
          WithouInterestIcome()
        ],

      ),
    );
  }
  
  Widget Section(String title){
    return  Container(
      margin: EdgeInsets.only(left: 5,top: 20,bottom: 0),
      child: Text(title,style: TextStyle(fontSize: 16.0,color: Colors.white)),
    );
  }

  /// "战区" "地区"选择
  Widget AreaSection(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text("KPI",style: TextStyle(fontSize: 15,color: Colors.white)),
        Row(
          children: <Widget>[
            Text("战区",style: TextStyle(fontSize: 15,color: Colors.white)),
            Icon(Icons.arrow_drop_down,color: Colors.white,size: 16,)
          ],
        ),
        Row(
          children: <Widget>[
            Text("深圳",style: TextStyle(fontSize: 15,color: Color(0xFF119CFD))),
            Icon(Icons.arrow_drop_down,color: Color(0xFF119CFD),size: 16)
          ],
        )
      ],
    );
  }

  /// 日期
  Widget dateSelect(){
    return Container(
      height: 36,
      margin: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: Color(0xFF23283C ),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Container(
        margin: EdgeInsets.only(left: 5,right: 5),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text("日期",style: TextStyle(fontSize: 14.0,color: Colors.white70)),
            Row(children: <Widget>[
              Text("2019-04",style: TextStyle(fontSize: 14.0,color: Colors.white70)),
              Icon(Icons.keyboard,color: Colors.white70,size: 15,)
            ],)
          ],
        ),
      ),
    );
  }

  /// KPI得分
  Widget cardKPI(){
    return Container(
      height: 194,
      margin: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: Color(0xFF23283C ),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Container(
        margin: EdgeInsets.only(left: 5,right: 5),
        child:Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 25)),
            Text("KPI得分",style: TextStyle(fontSize: 14,color: Colors.white70)),
            Padding(padding: EdgeInsets.only(bottom: 10)),
            RichText(text: TextSpan(
              text: "88.96",
              style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD)),
              children: [
                TextSpan(
                  text: "分",
                  style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                )
              ]
            )),
            Padding(padding: EdgeInsets.only(bottom: 20)),
            Container(
              margin: EdgeInsets.only(left: 25,right: 25),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Icon(Icons.assignment,color: Colors.amber,size: 13,),
                      Text("『A类行排名』",style: TextStyle(fontSize: 13.0,color: Colors.white70))
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Icon(Icons.assignment,color: Colors.amber,size: 13,),
                      Text("『全行排名』",style: TextStyle(fontSize: 13.0,color: Colors.white70))
                    ],
                  ),
                ],
              ),
            ),
            Padding(padding: EdgeInsets.only(bottom: 10)),
            Container(
              margin: EdgeInsets.only(left: 40,right: 40),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("第二名",style: TextStyle(fontSize: 13.0,color: Color(0xFF119CFD))),
                  Text("第一名",style: TextStyle(fontSize: 13.0,color: Color(0xFF119CFD))),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 分行画像
  Widget cardBankPortrait(){
    return Container(
      height: 320,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: Color(0xFF23283C ),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 10),
            child: Text("收入",style: TextStyle(fontSize: 16,color: Color(0xFF119CFD))),
          ),
          Image.asset("images/pic1.png"),
          bottomBlockWidget("实际得分",Color(0xFF119CFD),"经营单位平均得分",Color(0xFFF3CE30))
        ],
      ),
    );


  }

  /// 营业收入概况
  Widget cardIncome(){
    return Container(
      height: 200,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: Color(0xFF23283C ),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Container(
        margin: EdgeInsets.only(left: 5,right: 5),
        child:Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 25)),
            Text("累计营业收入",style: TextStyle(fontSize: 14,color: Colors.white70)),
            Padding(padding: EdgeInsets.only(bottom: 10)),
            RichText(text: TextSpan(
                text: "1,000",
                style: TextStyle(fontSize: 42.0,color: Color(0xFF119CFD)),
                children: [
                  TextSpan(
                    text: "亿",
                    style: TextStyle(fontSize: 15,color: Color(0xFF119CFD)),
                  )
                ]
            )),
            Padding(padding: EdgeInsets.only(bottom: 20)),
            Container(
              margin: EdgeInsets.only(left: 25,right: 25),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text("同比",style: TextStyle(fontSize: 13.0,color: Colors.white70)),
                      Padding(padding: EdgeInsets.only(left: 5.0)),
                      Icon(Icons.arrow_upward,color: Color(0xFFFF3F77),size: 13),
                      Text("+3.5%",style: TextStyle(fontSize: 13.0,color: Color(0xFFFF3F77)))
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text("达成率",style: TextStyle(fontSize: 13.0,color: Colors.white70)),
                      Text("100%",style: TextStyle(fontSize: 13.0,color: Color(0xFF119CFD)))
                    ],
                  ),
                ],
              ),
            ),
            Padding(padding: EdgeInsets.only(bottom: 10)),
            Container(
              margin: EdgeInsets.only(left: 25,right: 25),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                         Text("非息收入",style: TextStyle(fontSize: 13.0,color: Colors.white70)),
                          Text("2,000亿",style: TextStyle(fontSize: 13.0,color: Color(0xFF119CFD)))
                      ],
                    ),
                  Row(
                      children: <Widget>[
                      Text("占比",style: TextStyle(fontSize: 13.0,color: Colors.white70)),
                      Text("60.00%",style: TextStyle(fontSize: 13.0,color: Color(0xFF119CFD)))
                      ],
                    )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 非息收入详情
  Widget WithouInterestIcome(){
    return Container(
      height: 317,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        color: Color(0xFF23283C ),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Container(
        child: Column(

          children: <Widget>[
            Padding(padding: EdgeInsets.only(bottom: 25)),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("非息收入",style: TextStyle(fontSize: 15,color: Color(0xFF119CFD))),
                Icon(Icons.arrow_drop_down,color: Color(0xFF119CFD),size: 16)
              ],
            ),
            Padding(padding: EdgeInsets.only(bottom: 20)),
            baseChart3(),
            Padding(padding: EdgeInsets.only(bottom: 10)),
            bottomBlockWidget("实际",Color(0xFF119CFD),"同比增速",Color(0xFFF3CE30)),
          ],
        ),
//        margin: EdgeInsets.only(left: 5,right: 5),
      ),
    );
  }

  Widget baseChart3(){
    return Container(
      margin: EdgeInsets.only(top: 5,left: 5),
      alignment: Alignment.centerLeft,
      child: Stack(
        children: <Widget>[

          ChartLine(
//        backgroundColor: Colors.red,
            chartBeans: [
              ChartBean(x: '1月', y: 450,color: Colors.green),
              ChartBean(x: '', y: 1300,color: Colors.green),
              ChartBean(x: '3月', y:800,color: Colors.red),
              ChartBean(x: '', y: 900,color: Colors.green),
              ChartBean(x: '', y: 400,color: Colors.green),
              ChartBean(x: '6月', y: 200),
              ChartBean(x: '', y: 990,color: Colors.green),
              ChartBean(x: '', y: 700,color: Colors.green),
              ChartBean(x: '9月', y: 600),
              ChartBean(x: '', y: 1300,color: Colors.green),
              ChartBean(x: '', y: 2000,color: Colors.green),
              ChartBean(x: '12月', y: 700),
            ],
            isShowHintX:true,
            hintXLineWidth: 0.5,
            hintXColor: Colors.white70,
            size: Size(MediaQuery.of(context).size.width - 50,
                200),
            isCurve: true,
            lineWidth: 2.5,
            lineColor: Colors.transparent,
            fontColor: Colors.transparent,
            xyColor: Colors.transparent,
            isShowBottomtHintX: true,
            xTextPadding: 5,
            numberOfhintX: 5,
            fontSize: 11,
            yNum: 4,
            isReverse: false,
            isCanTouch: true,
            isShowPressedHintLine: true,
            pressedPointRadius: 4,
            isShowXyRuler: false,
            pressedHintLineWidth: 0.5,
            pressedHintLineColor: Colors.white,
            duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
          ),
          Container(
            height: 150,
//          color: Colors.white,
            margin: EdgeInsets.only(top: 16,left: 28,right: 40),
            child: drawPost(),
          ),
          ChartLine(
//        backgroundColor: Colors.red,
            chartBeans: [
              ChartBean(x: '1月', y: 450,color: Colors.green),
              ChartBean(x: '', y: 1300,color: Colors.green),
              ChartBean(x: '3月', y:800,color: Colors.red),
              ChartBean(x: '', y: 900,color: Colors.green),
              ChartBean(x: '', y: 400,color: Colors.green),
              ChartBean(x: '6月', y: 200),
              ChartBean(x: '', y: 990,color: Colors.green),
              ChartBean(x: '', y: 700,color: Colors.green),
              ChartBean(x: '9月', y: 600),
              ChartBean(x: '', y: 1300,color: Colors.green),
              ChartBean(x: '', y: 2000,color: Colors.green),
              ChartBean(x: '12月', y: 700),

            ],
            isShowHintX:true,
            hintXLineWidth: 0.001,
            hintXColor: Colors.transparent,
            size: Size(MediaQuery.of(context).size.width - 40,
                200),
            isCurve: true,
            lineWidth: 2.5,
            lineColor: Color(0xFFFAD961),
            fontColor: Colors.white70,
            xyColor: Colors.transparent,
            isShowBottomtHintX: true,
            xTextPadding: 5,
            numberOfhintX: 5,
            fontSize: 11,
            yNum: 4,
            isReverse: false,
            isCanTouch: true,
            isShowPressedHintLine: true,
            pressedPointRadius: 4,
            isShowXyRuler: false,
            pressedHintLineWidth: 0.5,
            pressedHintLineColor: Colors.white,
            duration: Duration(milliseconds: 2000),
//          backgroundColor: Colors.red,
          ),
          Container(
//          color: Colors.red,
              margin: EdgeInsets.fromLTRB(14, 10, 0, 0),
              child: Text("亿",style: TextStyle(fontSize:11,color: Colors.white70 ),textAlign: TextAlign.left,)
          ),
          Container(
//            color: Colors.red,
            margin: EdgeInsets.only(left: MediaQuery.of(context).size.width - 55,top: 10),
            child: Column(
              children: <Widget>[
                Text("%",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
                Text("80",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
                Padding(padding: EdgeInsets.only(bottom: 20)),
                Text("60",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
                Padding(padding: EdgeInsets.only(bottom: 20.5)),
                Text("40",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
                Padding(padding: EdgeInsets.only(bottom: 20.5)),
                Text("20",style: TextStyle(fontSize: 12.0,color: Colors.white70)),
                Padding(padding: EdgeInsets.only(bottom: 20.5)),
                Text("0",style: TextStyle(fontSize: 12.0,color: Colors.white70)),

              ],
            ),
          ),
        ],

      ),
    );
  }

  Widget drawPost(){
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              postWith(40),
              postWith(90),
              postWith(75),
              postWith(80),
              postWith(39),
              postWith(20),
              postWith(40),
              postWith(20),
              postWith(30),
              postWith(50),
              postWith(90),
              postWith(60),
            ],
          ),
        ),
//      Padding(padding: EdgeInsets.only(bottom: 5)),
//      Text(title,style: TextStyle(fontSize: 11,color: Colors.white70))
      ],
    );
  }

  Widget postWith(double value){
    return  SizedBox(
      width: 6,
      height: value,
      child: Container(
        decoration: ShapeDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFF00C6FB),Color(0xFF006CED)],
          ),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3)),
        ),
      ),
    );
  }


}